<template>
  <div class="Captions">
    <h2 class="demo-title"><span class="mark">#</span>{{ title }}</h2>
    <div class="description">
      <span class="content">
        <slot></slot>
      </span>
    </div>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  export default defineComponent ({
    name: "Captions",
    props: {
      title: {
        type: String
      },
      isContent: {
        type:Boolean,
        default: true
      }
    }
  })
</script>

<style lang="scss">
  .Captions {
    .demo-title {
      font-size: 22px;
      margin-top:20px;
      margin-bottom:10px;
    }
    .mark {
      color: rgb(104, 195, 43);
      font-weight: bold;
      font-size: 22px;
      margin-right: 10px;
    }
    .description {

      .content {
        font-size:14px;
        .mark-span {
          color: rgb(104, 195, 43);
          font-weight: bold;
        }
      }
    }
  }
</style>
